<template>  
    <el-main>
        <el-form :model="RepairForm" size="mini" label-width="80px">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="编号:">
                        <el-input v-model="RepairForm.RepairId" placeholder="请输入报修单编号..." @keyup.enter.native="onSearch"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="1">
                <el-button class="searchBtn"  style="margin-left:0" size="mini" icon="el-icon-search">查询</el-button>
                 </el-col>
                <el-button @click="AddRepair" class="newBtn" type="primary" size="mini" icon="el-icon-circle-plus" style="margin-right:-750px" >添加报修单信息</el-button>
            </el-row>
        </el-form>
        <el-table size="mini" :data="tableData" :height="tableHeight" border style="width: 100%">
                 <el-table-column type="selection"></el-table-column>

            <el-table-column prop="RepairId" label="报修单编号"  ></el-table-column>
            <el-table-column prop="RTitle" label="报修单标题" ></el-table-column>
            <el-table-column prop="OwnerName" label="报修人" ></el-table-column>
            <el-table-column prop="Phone" label="报修人联系方式"></el-table-column>
            <el-table-column prop="RStatus" label="维修状态" ></el-table-column>
            <el-table-column prop="RTime" label="处理时间" ></el-table-column>
            <el-table-column label="操作" width="200" align="center"  >bao
                <template slot-scope="scope">
                    <el-button @click.native.prevent="RepairDetail(scope.$index,scope.row)"  size="mini" style="margin-left:-5px">详情</el-button>
                    <el-button @click.native.prevent="EditRepair(scope.$index,scope.row)" size="mini" style="margin-left:-5px">修改</el-button>
                    <el-button @click.native.prevent="deleteRow(scope.$index,tableData)" size="mini" style="margin-left:-5px">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页组件-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="this.tableData.length">
        </el-pagination>
        <!-- 新增对话框-->
        <el-dialog title="添加报修单信息" :visible.sync="visible" width="50%">
            <el-form ref="AddRepair" :model="AddRepairForm" size="mini" :inline="true" >
                <el-form-item prop="RTitle" label="报修单标题" label-width="130px" >
                    <el-input v-model="AddRepairForm.RTitle" placeholder="报修单标题" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item prop="RMoney" label="维修费用" label-width="130px">
                    <el-input v-model="AddRepairForm.RMoney" placeholder="维修费用" ></el-input>
                </el-form-item>
                <el-form-item prop="RContent" label="报修单内容" label-width="130px">
                    <el-input v-model="AddRepairForm.RContent" placeholder="报修单内容" :rows="8" style="width:512px"  type="textarea"  resize="none"></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="报修人" label-width="130px">
                    <el-input v-model="AddRepairForm.OwnerName" placeholder="报修人" ></el-input>
                </el-form-item>
                <el-form-item prop="Phone" label="报修人联系方式" label-width="130px">
                    <el-input v-model="AddRepairForm.Phone" placeholder="报修人联系方式" ></el-input>
                </el-form-item>
                <el-form-item prop="Repairer" label="维修员" label-width="130px">
                    <el-input v-model="AddRepairForm.Repairer" placeholder="维修员" ></el-input>
                </el-form-item>
                <el-form-item prop="RPhone" label="维修员联系方式" label-width="130px">
                    <el-input v-model="AddRepairForm.RPhone" placeholder="维修员联系方式" ></el-input>
                </el-form-item>
                <el-form-item style="margin-top:10px ">
                    <el-button @click="visible=false" style="margin-right:50px" size="large">取 消</el-button>
                    <el-button type="primary" @click="visible= false" size="large" style="margin-right:-50px">确 定</el-button>
                 </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="报修信息详情" :visible.sync="visible1" width="50%">
        <el-form ref="RepairDetail" :model="RepairDetailForm" size="mini" :inline="true" >
        
                <el-form-item prop="RTitle" label="报修单标题" label-width="130px" >
                    <el-input v-model="RepairDetailForm.RTitle" placeholder="报修单标题" disabled></el-input>
                </el-form-item>
                <el-form-item prop="RepairId" label="报修单编号" label-width="130px" >
                    <el-input v-model="RepairDetailForm.RepairId" placeholder="报修单编号" disabled></el-input>
                </el-form-item>
                <el-form-item prop="RContent" label="报修单内容" label-width="130px">
                    <el-input v-model="RepairDetailForm.RContent" placeholder="报修单内容" :rows="8" style="width:512px"  type="textarea"  resize="none" disabled></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="报修人" label-width="130px" >
                    <el-input v-model="RepairDetailForm.OwnerName" placeholder="报修人"  disabled></el-input>
                </el-form-item>
                <el-form-item prop="Phone" label="报修人联系方式" label-width="130px">
                    <el-input v-model="RepairDetailForm.Phone" placeholder="报修人联系方式" disabled ></el-input>
                </el-form-item>
                <el-form-item prop="Repairer" label="维修员" label-width="130px">
                    <el-input v-model="RepairDetailForm.Repairer" placeholder="维修员" disabled></el-input>
                </el-form-item>
                <el-form-item prop="RPhone" label="维修员联系方式" label-width="130px">
                    <el-input v-model="RepairDetailForm.RPhone" placeholder="维修员联系方式" disabled></el-input>
                </el-form-item>
                <el-form-item prop="RMoney" label="维修费用" label-width="130px" >
                    <el-input v-model="RepairDetailForm.RMoney" placeholder="维修费用" disabled ></el-input>
                </el-form-item>
                <el-form-item prop="RStatus" label="维修状态" label-width="130px" >
                    <el-input v-model="RepairDetailForm.RStatus" placeholder="维修状态" disabled ></el-input>
                </el-form-item>
                <el-form-item prop="RTime" label="处理时间" label-width="130px" >
                    <el-input v-model="RepairDetailForm.RTime" placeholder="处理时间" disabled ></el-input>
                </el-form-item>
        </el-form>
        </el-dialog>
        <el-dialog title="修改报修信息" :visible.sync="visible2" width="50%">
        <el-form ref="EditRepair" :model="EditRepairForm" size="mini" :inline="true" >
               <el-form-item prop="RTitle" label="报修标题" label-width="130px" >
                    <el-input v-model="EditRepairForm.RTitle" placeholder="报修标题" maxlength="10" show-word-limit></el-input>
                </el-form-item>
                <el-form-item prop="RMoney" label="维修费用" label-width="130px">
                    <el-input v-model="EditRepairForm.RMoney" placeholder="维修费用" ></el-input>
                </el-form-item>
                <el-form-item prop="RContent" label="报修内容" label-width="130px">
                    <el-input v-model="EditRepairForm.RContent" placeholder="报修内容" :rows="8" style="width:512px"  type="textarea"  resize="none"></el-input>
                </el-form-item>
                <el-form-item prop="OwnerName" label="报修人" label-width="130px">
                    <el-input v-model="EditRepairForm.OwnerName" placeholder="报修人" ></el-input>
                </el-form-item>
                <el-form-item prop="Phone" label="报修人联系方式" label-width="130px">
                    <el-input v-model="EditRepairForm.Phone" placeholder="报修人联系方式" ></el-input>
                </el-form-item>
                <el-form-item prop="Repairer" label="维修员" label-width="130px">
                    <el-input v-model="EditRepairForm.Repairer" placeholder="维修员" ></el-input>
                </el-form-item>
                <el-form-item prop="RPhone" label="维修员联系方式" label-width="130px">
                    <el-input v-model="EditRepairForm.RPhone" placeholder="维修员联系方式" ></el-input>
                </el-form-item>
                <el-form-item style="margin-top:10px ">
                    <el-button @click="visible2=false" style="margin-right:50px" size="large">取 消</el-button>
                    <el-button type="primary" @click="visible2= false" size="large" style="margin-right:-50px">确 定</el-button>
                 </el-form-item>
        </el-form>
        </el-dialog>

    </el-main>
</template>
<script>
export default {
    data(){
        
        return{
            currentPage:1,
            pageSize:10,
           
            RepairForm:{
                RepairId:""
            },
            tableHeight: window.innerHeight,
            tableData:[
                {
                    RepairId: "00000001",
                    RTitle: "怎么没电了",
                    RContent: "包租婆怎么没电了？",
                    RTime:"2020-08-08",
                    OwnerName:"001",
                    RStatus:"处理中",
                    RMoney:"200",
                    Repairer:"小马",
                    Phone:"123456",
                    RPhone:"1234567",
                },
            ],
            visible:false,
            visible1:false,
            visible2:false,
            AddRepairForm:{
                    RepairId: "",
                    RTitle: "",
                    RContent: "",
                    RTime:"",
                    OwnerName:"",
                    RStatus:"",
                    RMoney:"",
                    Repairer:"",
                    Phone:" ",
                    RPhone:" ",
            },
            
            EditRepairForm:{
                RepairId: "",
                    RTitle: "",
                    RContent: "",
                    RTime:"",
                    OwnerName:"",
                    RStatus:"",
                    RMoney:"",
                    Repairer:"",
                    Phone:" ",
                    RPhone:" ",
            },
            RepairDetailForm:{
                RepairId: "",
                    RTitle: "",
                    RContent: "",
                    RTime:"",
                    OwnerName:"",
                    RStatus:"",
                    RMoney:"",
                    Repairer:"",
                    Phone:" ",
                    RPhone:" ",
            },
            // rules:{
            //     userName:[
            //     {
            //         required:true,
            //         trigger: "change",
            //         message: "请输入用户名"
            //     }
            //     ],
            //     address: [
            //     {
            //         required: true,
            //         trigger: "change",
            //         message: "请输入地址"
            //     }
            //     ]
            // }
        };
    },methods:{
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val){
            console.log(`当前页: ${val}`);
        },
        //添加报修信息
        AddRepair(){
            //调用表单清空方法
            this.resetForm('addRepair');
            this.visible=true;
        },
        //报修信息详情
        RepairDetail(index,row){
            this.visible1=true;
            this.RepairDetailForm=Object.assign({},row);
        },
        //修改报修信息
        EditRepair(index,row){
            this.visible2=true;
            this.EditRepairForm=Object.assign({},row);
            
        },
        //删除用户
        deleteUser(row){
            console.log(row);
        },
        //清空表单数据
        resetForm(formName){
            if(this.$refs[formName]){
                this.$refs[formName].resetFields();
            }
        },
        comfirmBtn(){
            let _this=this;
            _this.$refs.addUser.validate(valid=>{
                if(valid){
                    _this.visible=false;
                }
            })
        },
    },
    
    
    //该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题
// 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，
// 这个操作都应该放进Vue.nextTick()的回调函数中
    mounted() {
        this.$nextTick(() => {
            this.tableHeight = window.innerHeight - 200; //后面的50：根据需求空出的高度，自行调整
        });
    }
};
</script>
<style lang="scss" scoped>
.searchBtn{
    margin-left: 30px;
}
.el-main{
    padding-top: 5px !important;
}
</style>